<template>
  <el-container>
    <el-header style="background-color: white;color:black">
      <h1 align="center">供应商基本信息</h1>

    </el-header>
      <br />
      <br />
    <!-- 查询条件-->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.suppliersName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="证书编号">
        <el-input v-model="queryForm.suppliersPid" placeholder="证书编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData()">查询</el-button>
      </el-form-item>
    </el-form>



    <el-main>
      <!-- 添加供应商-->

            <el-button type="primary" @click="addSuppliers()">新增供应商</el-button>

            <el-button  type="primary" @click="exportExcel"
                  >一键导出excel</el-button>
        <!-- 表格插件 data当前页集合-->
        <el-table :data="list" style="120%"  :row-class-name="rowClassName">
          <!--列组件  prop对应当前页集合的对象属性 -->

          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="suppliersId" label="编号" v-if="false" width="50"></el-table-column>
          <el-table-column prop="suppliersName" label="姓名" width="70"></el-table-column>
          <el-table-column prop="suppliersSex"  label="性别" width="50">
            <template slot-scope="scope">
                            <span v-if="scope.row.suppliersSex === 1">男</span>
                            <span  v-else-if="scope.row.suppliersSex === 0">女</span>
                        </template>
          </el-table-column>
          <el-table-column prop="suppliersTel" label="电话" width="120"></el-table-column>
          <el-table-column prop="suppliersEmail" label="邮箱" width="120"></el-table-column>
          <el-table-column prop="suppliersPidName" label="证件名称" width="120"></el-table-column>
          <el-table-column prop="suppliersPid" label="证件号码" width="120"></el-table-column>
          <el-table-column prop="suppliersStartTime" label="开始时间" width="120"></el-table-column>
          <el-table-column prop="suppliersEndTime" label="结束时间" width="120"></el-table-column>
          <el-table-column label="操作" width="200">
            <!-- solt-scope插槽 用来获取循环的迭代变量-->
            <template slot-scope="scope">
               <el-button type="danger" size="mini" @click="update(scope.row,scope.$index)">修改</el-button>
               <el-button type="danger" size="mini" @click="deleted(scope.row,scope.$index)">删除</el-button>
             </template>
          </el-table-column>
        </el-table>

          <!-- 一键导出execl-->
        <el-table :data="list01" style="120%" v-show="false" id="out-table" :row-class-name="rowClassName">
          <!--列组件  prop对应当前页集合的对象属性 -->

          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="suppliersId" label="编号" v-if="false" width="50"></el-table-column>
          <el-table-column prop="suppliersName" label="姓名" width="70"></el-table-column>
          <el-table-column prop="suppliersSex"  label="性别" width="50">
            <template slot-scope="scope">
                            <span v-if="scope.row.suppliersSex === 1">男</span>
                            <span  v-else-if="scope.row.suppliersSex === 0">女</span>
                        </template>
          </el-table-column>
          <el-table-column prop="suppliersTel" label="电话" width="120"></el-table-column>
          <el-table-column prop="suppliersEmail" label="邮箱" width="120"></el-table-column>
          <el-table-column prop="suppliersPidName" label="证件名称" width="120"></el-table-column>
          <el-table-column prop="suppliersPid" label="证件号码" width="120"></el-table-column>
          <el-table-column prop="suppliersStartTime" label="开始时间" width="120"></el-table-column>
          <el-table-column prop="suppliersEndTime" label="结束时间" width="120"></el-table-column>

        </el-table>
              <!-- 引入elementui的分页组件，前端实现的分页 -->
                 <el-pagination

                   background
                   layout="prev, pager, next"
                   :total="total"
                   @size-change="select"
                   @current-change="selectPage"
                   :current-page="queryForm.page"
                   :page-size="queryForm.row">
                 </el-pagination>

                 <!-- 提示框-->
                 <el-dialog :title="title" :visible.sync="isShow" width="60%">
                   <el-form ref="updateForm" :rules="rule"  :model="updateForm" label-width="80px">
                     <el-form-item label="姓名" prop="suppliersName">
                      <input type="hidden" v-model="updateForm.suppliersId"/>
                      <el-input v-model="updateForm.suppliersName"></el-input>
                     </el-form-item>
                     <el-form-item label="性别">
                       <el-select v-model="updateForm.suppliersSex" placeholder="性别">
                         <el-option label="男" value="1"></el-option>
                         <el-option label="女" value="0"></el-option>

                       </el-select><span v-if="title=='修改'" style="font-family: 'Courier New', Courier, monospace;">1代表男，0代表女</span>
                     </el-form-item>
                     <el-form-item label="电话" prop="suppliersTel">
                      <el-input  v-model="updateForm.suppliersTel"></el-input>
                     </el-form-item>
                     <el-form-item label="邮箱" prop="suppliersEmail">
                      <el-input  v-model="updateForm.suppliersEmail"></el-input>
                     </el-form-item>
                     <el-form-item label="证件" prop="suppliersPidName">
                      <el-input v-model="updateForm.suppliersPidName"></el-input>
                     </el-form-item>
                     <el-form-item label="证件号码" prop="suppliersPid" >
                      <el-input v-model="updateForm.suppliersPid"></el-input>
                     </el-form-item>
                     <el-form-item label="注册时间"  prop="suppliersStartTime">
                       <el-col :span="11">
                         <el-date-picker type="date"  value-format="yyyy-MM-dd"  placeholder="选择日期" v-model="updateForm.suppliersStartTime" style="width: 120%;"></el-date-picker>
                       </el-col>
                     </el-form-item>
                    <el-form-item label="到期时间"  prop="suppliersEndTime">
                       <el-col :span="11">
                         <el-date-picker type="date" value-format="yyyy-MM-dd"  placeholder="选择日期" v-model="updateForm.suppliersEndTime" style="width: 120%;"></el-date-picker>
                       </el-col>
                     </el-form-item>
                   </el-form>
                   <span slot="footer" class="dialog-footer">
                     <el-button type="warning" @click="cancel()">取 消</el-button>
                     <el-button type="primary" @click="submit('updateForm')">确 定</el-button>
                   </span>
                 </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

  import FileSaver from "file-saver";
  import XLSX from "xlsx";


  export default{
      name:"suppliers",
      data(){

        //手机号
         var validatePhone = (rule, value, callback) => {
              if (/^1[34578]{1}\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            };
         var validateEmail = (rule, value, callback) => {
                 if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(value) == false) {
                   callback(new Error("请输入正确的邮箱地址"));
                 } else {
                   callback();
                 }
               };
          var validatePid = (rule, value, callback) => {
                  if (/^(0|[1-9][0-9]*)$/.test(value) == false) {
                    callback(new Error("请输入正确的证件号"));
                  } else {
                    callback();
                  }
                };
          var validateStartTime = (rule, value, callback) => {
                  if(!value){
                    callback(new Error("请选择开始时间"));
                  }else{
                    if(this.updateForm.suppliersEndTime){
                      this.$refs.updateForm.validateField('suppliersEndTime');
                    }
                    callback();
                  }
                };
          var validateEndTime = (rule, value, callback) => {
            if(!value){
              callback(new Error("请选择结束时间"));
            }else{
              if(!this.updateForm.suppliersStartTime){
                callback(new Error("请选择开始时间！"))
              }else if(Date.parse(this.updateForm.suppliersStartTime) >= Date.parse(value)){
                callback(new Error("结束时间必须大于开始时间！"))
              }else{
                callback();
              }
            }
          };
        return{
          list:[],//当前页集合
          list01:[],
          totalPage:0,//总页数
          total:0,//总条数
          isShow:false,
          title:"修改",//对话框标题
          queryForm:{
            page:1,
            row:4,
            suppliersName:"",
            suppliersPid:""
          },
          qq:{//用来导出excel

          },
          updateForm:{
           suppliersId:"",
           suppliersName:"",
           suppliersSex:"",
           suppliersTel:"",
           suppliersEmail:"",
           suppliersPidName:"",
           suppliersPid:"",
           suppliersStartTime:"",
           suppliersEndTime:""
          },
          rule:{
            suppliersName:
            [
              { required: true, message: '请输入姓名', trigger: 'blur' },
              { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            suppliersTel:[
              { required: true, message: "请输入手机号", trigger: "blur" },
              { validator: validatePhone, trigger: "blur" }
            ],
            suppliersEmail:[
              { required: true, message: "请输入手机号", trigger: "blur" },
              { validator: validateEmail, trigger: "blur" }
            ],
            suppliersPidName:[
             { required: true, message: '请输入证件名称', trigger: 'blur' },
             { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
            ],
            suppliersPid:[
              { required: true, message: "请输入证件号", trigger: "blur" },
              { validator: validatePid, trigger: "blur" }
            ],
            suppliersStartTime:[
              {required: true, validator: validateStartTime,trigger: "blur"}
            ],
            suppliersEndTime:[
              {required: true,validator: validateEndTime,trigger: "blur"}
            ]

          }

        }

      },
      methods:{
        loadData(){//加载数据
          var self=this;
          var http=this.$http.get("/user/querySuppliers",{params:this.queryForm});
          http.then(function(rs){
              if(rs.data.data){
                console.log(rs.data.data)
               self.list=rs.data.data.list;
               self.total=rs.data.data.total;
               self.totalPage=rs.data.data.totalPage;
              }else{
                self.$message(rs.data.info)
                self.list=[];
                self.total=0;
              }
          })
          },
          loadData01(){//加载数据 用来生成excel
            var self=this;
            var http=this.$http.get("/user/suppliers",{params:this.qq});
            http.then(function(rs){
                if(rs.data.data){
                  console.log(rs.data.data)
                 self.list01=rs.data.data;
                }
            })
            },
          rowClassName({row, rowIndex}) {
              //把每一行的索引加一放进row.id
              row.id = rowIndex+1;
          },
      select(row){
         this.queryForm.row=row;
         this.loadData();
       },
       selectPage(page){
         this.queryForm.page=page;
         this.loadData();
       },
       update(row,index) {
         this.isShow=true;
         //数据回显 去除双向绑定的效果；
         this.updateForm=JSON.parse(JSON.stringify(row));
         this.title="修改";
       },
       deleted(row,index){
         var self=this;
          this.updateForm=JSON.parse(JSON.stringify(row));
         var http=this.$http.get("/user/deleteSuppliers",{params:this.updateForm});
         http.then(function(rs){
             if(rs.data.success){
               console.log(rs.data.info);
               self.$message(rs.data.info);
               self.loadData();
             }
         })
       },
       submit(updateForm){
        var self=this;
          if(this.title=="修改"){
             this.$refs[updateForm].validate((valid) => {
                      if (valid) {
                       var http=this.$http.get("/user/updateSuppliers",{params:this.updateForm});
                       http.then(function(rs){
                           if(rs.data.success){
                             console.log(rs.data.info);
                             self.$message(rs.data.info)
                             self.isShow=false;
                             self.loadData();
                           }
                       })
                      } else {
                        console.log('error submit!!');
                        return false;
                      }
                    });
          }else{
            this.$refs[updateForm].validate((valid) => {
              if (valid) {
                var http=this.$http.get("/user/addSuppliers",{params:this.updateForm});
                http.then(function(rs){
                    if(rs.data.success){
                      console.log(rs.data.info);
                      self.$message(rs.data.info);
                      self.isShow=false;
                      self.loadData();
                    }
                })
              } else {
                  console.log('error submit!!');
                    return false;
                   }
               });
          }
       },
       addSuppliers(){
         this.updateForm={};
         this.isShow=true;
         this.title="新增供应商";
       },
       cancel(){
         this.isShow=false;
       },
       exportExcel(){
           var xlsxParam = { raw: true };
                /* 从表生成工作簿对象 */
                var wb = XLSX.utils.table_to_book(
                  document.querySelector("#out-table"),
                  xlsxParam
                );
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                  bookType: "xlsx",
                  bookSST: true,
                  type: "array",
                });
                try {
                  FileSaver.saveAs(
                    //Blob 对象表示一个不可变、原始数据的类文件对象。
                    //Blob 表示的不一定是JavaScript原生格式的数据。
                    //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                    //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                    new Blob([wbout], { type: "application/octet-stream" }),
                    //设置导出文件名称
                    "sheetjs.xlsx"
                  );
                } catch (e) {
                  if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
              },
      },
      mounted() {
        this.loadData();
        this.loadData01();
      }
   }

  </script>

<style>
</style>
